<template>
  <div :class="['htable', zebraStripes?'zebraStripes':'', showHeadBgNone?'showHeadBgNone':'']">
    <a-alert class="alert-message" v-if="selectedRowKeys.length">
      <span slot="message">
        <span>{{ `已选择 ${selectedRowKeys.length} 项` }}</span>
        <span></span>
        <span color="red" @click.stop="cancel">清空</span>
      </span>
    </a-alert>
    <a-table :row-selection="showRowSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null" v-bind="{...$attrs, ...tableConfig}" :loading="loading" @change="changePage">
      <span slot="index" slot-scope="text, record, index">
        {{ (tableConfig.pagination.current - 1) * tableConfig.pagination.pageSize + index + 1 }}
      </span>
      <span slot="statusSlide" slot-scope="text, record">
        <a-switch v-model="record.status" @change="pow(record)"></a-switch>
      </span>
      <template v-for="item in slotList" :slot="item" slot-scope="text, record, index">
        <slot :name="item" :record="record" :text="text" :index="index"></slot>
      </template>

    </a-table>
  </div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep';

export default {
  name: 'HTable',
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    // 表头背景透明
    showHeadBgNone: {
      type: Boolean,
      default: true
    },
    // 显示斑马纹
    zebraStripes: {
      type: Boolean,
      default: true
    },
    // 显示 选择框
    showRowSelection: {
      type: Boolean,
      default: false
    },
    dataAll: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      current: 1,
      paginationDefault: {
        current: 1,
        pageSize: 10,
        total: 50,
        showLessItems: true
      },
      // 默认分页参数
      params: {

      },
      rowSelection: null,
      selectedRowKeys: [],
      selectedRow: [],
      tableConfig: {},
      columns: [],
      dataSource: [],
      loading: false,
      defaultSlot: ['statusSlide', 'index'],
      slotList: [],
      slotList2: []
    };
  },
  watch: {
    config: {
      handler(config) {
        if (Object.values(config).length) {
          const Config = cloneDeep(config);
          const { pagination } = Config;
          if (pagination) {
            this.params.pagination = Object.assign({}, this.paginationDefault, pagination);
            delete Config.pagination;
          }
          this.tableConfig = Object.assign({}, this.params, Config);
          const slotList = this.tableConfig.columns.filter(e => (e.scopedSlots && e.scopedSlots.customRender));

          if (slotList.length) {
            this.slotList = slotList.map(e => (e.scopedSlots && e.scopedSlots.customRender)).filter(e => !this.defaultSlot.includes(e));
          }
        }
        this.loading = false;
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.init(this.tableConfig.pagination);
  },
  methods: {
    init(params) {
      this.loading = true;
      this.$emit('init', params ? { pageSize: params.pageSize, pageNo: params.current } : false);
      const s = setTimeout(() => {
        this.loading = false;
        clearTimeout(s);
      }, 300);
    },
    refresh(noReset) {
      if (!noReset) this.tableConfig.pagination && this.$set(this.tableConfig.pagination, 'current', 1);
      if (!noReset) this.paginationDefault && (this.paginationDefault.current = 1);
      this.init();
      // console.log(this.paginationDefault);
    },
    changePage(e) {
      this.init(e);
      this.paginationDefault.current = e.current;
    },
    // 点击修改状态
    pow(record) {
      this.$emit('changeStatus', record);
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('[selectedRowKeys]', selectedRowKeys, selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      const selectedRow = selectedRows; // this.tableConfig.dataSource.filter(e => selectedRowKeys.includes(e.id));
      this.selectedRow = selectedRows;
      this.$emit('select', { selectedRowKeys, selectedRow });
    },
    cancel() {
      this.selectedRowKeys = [];
      this.$emit('select', { selectedRowKeys: [], selectedRow: [] });
    },
    update(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    setSelectedRowKeys(keys) {
      this.selectedRowKeys = keys;
    }
  }
};
</script>
<style lang="less">
.htable {
  .ant-table-pagination.ant-pagination {
    float: none;
    text-align: center;
    transform: translate(0, 24px);
    margin-bottom: 48px !important;
  }
  &.showHeadBgNone {
    .ant-table-thead {
      th {
        background: none;
      }
    }
  }
  .alert-message {
    margin-bottom: 8px;
  }

}
</style>
